// pages/result/result.js
import * as echarts from '../../ec-canvas/echarts';

let chart = null;

function initChart(canvas, width, height, dpr) {
  let data = getCurrentPages()
  // console.log(data);
  let choosedatas = JSON.parse(data[data.length-1].options.choosedata)
  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);

 let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
        color: '#999'
        }
      }
    },
    toolbox : {
      show  :  true,
      orient : 'horizontal',
      itemSize :12,
     
    },
    grid : {
    
      right : 40,
    },
    legend: {
      data: ['柱状图', '转化分', '曲线图']
    },
    xAxis: 
      {
        type: 'category',
        data: choosedatas.tizhichoose,
        nameGap : 5,
        
       
        axisTick : {
          alignWithLabel : true,
          interval  : 0,
         
        },
        axisPointer: {
          type: 'shadow',
          
        },
        axisLabel : {
          interval : 0,
          formatter: function(value) {
            return value.split('').join('\n')
          }
         },
        axisLine : {
          show : true,
          symbol : ['none', 'arrow'],
          symbolOffset : [0, 13],
          
        },
      
       
      }
    ,
    yAxis: [
      {
        type: 'value',
        
        splitLine:{
          show:true,
          lineStyle:{
            type: [9, 10],
              color : '#000',
          }
      },
        name: '转化分',
        min: 0,
        max: 100,
        interval: 10,
        show :true,
       
        axisLine : {
          show : true,
          
        },
        axisLabel: {
          formatter: '{value} ',
          show: true,
          fontSize : 10
        },
     
      },
    
      
    ],
    series: [
      {
        name: '柱状图',
        type: 'bar',
        barWidth : 20,
        
        
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 分';
          }
        },
        data:choosedatas.obj.tranlatefen,
       
        markLine : {
          symbol:'none',
          lineStyle:{
            width : 2,
            type: [9, 10],
          
           
          },
         
          label : {
            position:'end',
            show  : true,
            fontSize : 9,
            distance : -5,
           
          },
          data : [
            {
              name: '倾向分值区',
              yAxis: 30,
              symbol:'none',
              label:{
                formatter : `倾向分值区`,
               
              },
              lineStyle:{
                color : '#03F',
              }
          },
          {
            name: '确定分值区',
            yAxis: 40,
            symbol:'none',
           
            label:{
              formatter : `确定分值区`,
             
            },
            lineStyle:{
              color : '#ff2400',
              
            },
          },
          {
            name: '基础分值区',
            yAxis: 20,
            symbol:'none',
            label:{
              formatter : `基础分值区`,
              
            },
            lineStyle:{
              color : '#ff9',
            }
            },
       
       
          ]
        }
      },
      {
        name: '曲线图',
        type: 'line',
        color : 'red',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 分';
          }
        },
        data: choosedatas.obj.tranlatefen
      },
   
    ]
  };

  chart.setOption(option);
  return chart;
}
Page({

  
  data: {
    ec: {
      onInit: initChart,
      
    },
    choosedatas : {}
  },
  saveimg(){
    const ecComponent = this.selectComponent('#mychart-dom-bar');

    // 先保存图片到临时的本地文件，然后存入系统相册
    ecComponent.canvasToTempFilePath({
      success: res => {
        console.log("tempFilePath:", res.tempFilePath)

        // 存入系统相册
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath || '',
          success: res => {
            console.log("success", res)
          },
          fail: res => {
            console.log("fail", res)
          }
        })
      },
      fail: res => console.log(res)
    });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

    let choosedatas = JSON.parse(options.choosedata)
    // console.log(choosedatas);
    this.setData({
      choosedatas
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    setTimeout(function () {
      // 获取 chart 实例的方式
      // console.log(chart)
    }, 2000);
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  },
  
})